<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-breadcrumbs :items="breadcrumbs">
      <template v-slot:divider>
        <v-icon>forward</v-icon>
      </template>
    </v-breadcrumbs>
    <v-container class="v-container" fluid fill-height grid-list-md>
      <v-layout row wrap align-center>
        <span class="subheading">筛选</span>
        <v-flex class="ml-4" d-flex xs12 sm6 md3 lg2>
          <v-text-field label="课程名称" v-model="filter.name"></v-text-field>
        </v-flex>
        <v-flex class="ml-4" d-flex xs12 sm6 md3 lg2>
          <v-select :items="[{id:-1,name:'全部'}].concat(courseType)" item-text="name" item-value="id" label="课程类型" v-model="filter.label" search-input></v-select>
        </v-flex>
        <v-flex xs12>
          <v-btn color="info" @click="newCourse">新增</v-btn>
          <v-btn color="warning" @click="deleteDialog.visible=true">删除</v-btn>
        </v-flex>
        <v-flex xs12>
          <course-table @delete="deleteDialog.visible=false" @edit="showEditDialog" ref="table" :name="filter.name" :label="filter.label"/>
        </v-flex>
      </v-layout>
    </v-container>
    <Dialog ref="dialog" :course-type="courseType" @update="$refs.table.update()"/>
    <v-dialog v-model="deleteDialog.visible" max-width="768">
      <v-card>
        <v-card-title class="headline">警告</v-card-title>
        <v-card-text>是否删除选择项？</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="info" flat @click="deleteDialog.visible=false">取消</v-btn>
          <v-btn color="warning" flat @click="$refs.table.deleteCourse()">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { getCourseType } from '../../api/course'
import { setTableHeight } from '../../utils/table'
import { mapGetters } from 'vuex'
import Dialog from './Dialog'
import CourseTable from './Table'
export default {
  name: 'Index',
  components: {
    Dialog,
    CourseTable
  },
  data: () => ({
    breadcrumbs: [
      {
        text: '课程',
        disabled: true
      }
    ],
    courseType: [],
    filter: {
      name: '',
      label: -1
    },
    deleteDialog: {
      visible: false,
      id: []
    }
  }),
  methods: {
    getCourseType () {
      getCourseType().then((res) => {
        this.courseType = res.data.data
        this.filter.label = -1
      })
    },
    setTableHeight (height) {
      setTableHeight(height)
    },
    newCourse () {
      this.$refs.dialog.show('新建课程')
      this.$refs.dialog.clear()
    },
    showEditDialog (data) {
      this.$refs.dialog.show('修改课程')
      this.$refs.dialog.get(data)
    }
  },
  mounted () {
    this.getCourseType()
    // this.$refs.table.update()
    // this.getCourseList()
    this.setTableHeight(document.documentElement.clientHeight)
  },
  computed: {
    ...mapGetters([
      'fullHeight',
      'fullWidth'
    ])
  },
  watch: {
    fullHeight: function (val) {
      this.setTableHeight(val)
    },
    fullWidth: function (val) {
      this.setTableHeight(this.fullHeight)
    }
  }
}
</script>

<style scoped>
  @import "../../style/table.css";
</style>
